<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- 引入css代码(注意修改路径) -->
    <script src="../js/echarts.js"></script>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/1.css">
    <script>
        // 当页面加载完成时进行的操作
        window.onload = function() {
            // console.log(memo.checked);
            // 判断"记住密码"是否已勾选
            if (memo.checked) {
                userName.value = localStorage.getItem("userName");
                pad.value = localStorage.getItem("passWord");
            }
        }
    </script>
</head>

<body>
    <div class="box1">
        <div class="word1"><i>排水管网GIS综合应用系统</i></div>

        <div class="line">
            <div class="yonghu"><span class="iconfont icon-yonghu"></span></div>
            <input type="text" class="yh" placeholder="账号"><br>
        </div>
        <div class="line">
            <div class="yonghu">
                <span class="iconfont icon-mima"></span>
            </div>
            <input type="password" class="pad" placeholder="密码"><br>
        </div>
        <div class="line">
            <div class="yonghu">
                <span class="iconfont icon-yanzhengma"></span>
            </div>
            <input type="yzm" class="yzm" placeholder="验证码"><img src="../img/images/10002.gif" alt="" width="100px" height="40px"><br>
        </div>



        <div class="yzmw">请输入验证码</div>
        <div class="Mem">
            <input type="checkbox" class="mem" checked><span class="mp">记住密码</span>
        </div>
        <input type="button" value="登录" class="login">

        <script>
            // localStorage     永久存储
            // sessionStorage   临时存储
            // Cookie           存储用户信息
            console.log(localStorage);

            localStorage.setItem("userName", "123456");
            localStorage.setItem("passWord", "888888");
            localStorage.setItem("yzm", "3");

            console.log(localStorage.getItem("yh"));

            console.log(location);

            // 获取元素
            var userName = document.getElementsByClassName("yh")[0];
            var pad = document.getElementsByClassName("pad")[0];
            var memo = document.getElementsByClassName("mem")[0];
            var yzm = document.getElementsByClassName("yzm")[0];
            var login = document.getElementsByClassName("login")[0];



            login.onclick = function() {
                if (userName.value == localStorage.getItem("userName") && pad.value == localStorage.getItem("passWord") && yzm.value == localStorage.getItem("yzm")) {
                    // 通过事件跳到首页
                    location.href = "../page/0.html";
                } else {
                    alert("用户名或密码或验证码不正确，请重新登录");
                }
            }
        </script>


    </div>
</body>

</html>